<script lang="ts" setup>
  import { ref, computed } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { communicateSaveOrUpdate } from '@/api/store'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import { getList as getFranchisee } from '@/api/franchisee'
  import { getShopList,getShopDetailByShopId } from "@/api/store"

  interface Props {
    shopId?: number
    data?: object
  }

  const props = withDefaults(defineProps<Props>(), {
    shopId: 0,
    data: ()=>{ return {}}
  })

  const form = ref<any>(cloneDeep(props.data))
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel','success'])
  const franchiseeList = ref<any>([])
  const shopList = ref<any>([])
  const disChange = props.shopId === 0

  const rules: FormRules = {
    franchiseeId: [
      { required: true, message: '请选择专营商', trigger: 'change' },
    ],
    shopId: [
      { required: true, message: '请选择店铺', trigger: 'change' },
    ],
    communicateDate: [
      { required: true, message: '请选择沟通日期', trigger: 'change' },
    ],
    title: [
      { required: true, message: '请填写沟通事项', trigger: 'change' },
    ],
    result: [
      { required: true, message: '请填写结果', trigger: 'change' },
    ],
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})

  const fetchGetFranchisee = ()=> {
    getFranchisee({currentPage:1,pageSize:9999999}).then((res:any)=>{
      franchiseeList.value = res.data
    })
  }

  const fetchGetStore = ()=> {
    getShopList({currentPage:1,pageSize:9999999,franchiseeId:form.value.franchiseeId}).then((res: any)=> {
      shopList.value = res.data
    })
  }

  const changeFranchiseeId = (e: number) => {
    const find = franchiseeList.value.find((i: any)=>i.franchiseeId == e)
    form.value.franchiseeName = find.name
    form.value.shopName = '’'
    form.value.shopId = ''
    fetchGetStore()
  }

  const changeShopId = (e: number) => {
    const find = shopList.value.find((i: any)=>i.shopId == e)
    form.value.shopName = find.name
  }

  const cancel = ()=>{
    emit('cancel')
  }

  const success = ()=>{
    handleSubmit(communicateSaveOrUpdate, formRef.value, form.value, dialogRef.value)
  }

  const getShopDetail = () => {
    getShopDetailByShopId({id:props.shopId}).then((res: any)=> {
      form.value.shopId = res.shopId
      form.value.shopName = res.name
      form.value.franchiseeId = res.franchiseeId
      form.value.franchiseeName = res.franchiseeName
    })
  }
  fetchGetFranchisee()
  if(props.shopId) getShopDetail()
  if(form.value.shopCommunicateId) fetchGetStore()
</script>

<template>
  <gm-dialog
    ref="dialogRef"
    title="添加沟通事项"
    @cancel="cancel"
    @comfirm="success">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item  prop="franchiseeId" label="专营商姓名">
        <el-select v-if="disChange"  @change="changeFranchiseeId" filterable clearable v-model="form.franchiseeId" placeholder="请选择">
          <el-option v-for="item in franchiseeList" :label="item.name" :value="item.franchiseeId"></el-option>
        </el-select>
        <span v-else>{{form.franchiseeName}}</span>
      </el-form-item>
      <el-form-item  prop="shopId" label="店铺名称">
        <el-select v-if="disChange" @change="changeShopId" filterable clearable v-model="form.shopId" placeholder="请选择">
          <el-option v-for="item in shopList" :label="item.name" :value="item.shopId"></el-option>
        </el-select>
        <span v-else>{{form.shopName}}</span>
      </el-form-item>
      <el-form-item  prop="communicateDate" label="沟通日期">
        <el-date-picker
          v-model="form.communicateDate"
          type="date"
          placeholder="请选择"
          style="width:100%;"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item  prop="title" label="沟通事项">
        <el-input v-model="form.title" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" />
      </el-form-item>
      <el-form-item  prop="result" label="结果">
        <el-input v-model="form.result" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" />
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>


<style lang="scss" scoped>
</style>
